.SongDetail {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  //碟片
  .record-player {
    margin: 0 auto;
  }

  .lyric-box {
    flex: 1;
    overflow: hidden;

    .lyric {
      height: calc(100% - 8rem);
      overflow: initial;
    }
  }


  .bottom-box {
    padding: 1rem;
    position: absolute;
    bottom: 0;
    width: 100%;
    backdrop-filter: blur(5px);
    box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px 0 inset;

    .song-progress {
      width: 100%;
      padding: 0 0.5rem;
      $color-border: var(--cobalt-50);

      .progress-bar {
        position: relative;

        > input {
          width: 100%;
          filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.1));
          cursor: pointer;

          &[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            margin: 0;
            outline: 0;
            background-color: transparent;
          }

          &[type="range"]::-webkit-slider-runnable-track {
            height: 0.2rem;
            background: #eee;
          }

          &[type="range" i]::-webkit-slider-container {
            height: 1rem;
            overflow: hidden;
          }


          &[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 50%;
            background-color: $color-border;
            border: 0.2rem solid transparent;
            margin-top: -0.15rem;
            border-image: linear-gradient($color-border, $color-border) 0 fill / 0.15rem 0.25rem 0.15rem 0 / 0 0 0 1000px;
            transition: 0.3s;
          }
        }


        .range-1 {
          position: absolute;
          bottom: 0.29rem;
          z-index: 1;
          opacity: 0;
          transition: 0.1s;

          &:active {
            opacity: 1;
          }

          &[type="range"]::-webkit-slider-runnable-track {
            height: 0.3rem;
          }

          &[type="range"]::-webkit-slider-thumb {
            width: 0.6rem;
            height: 0.6rem;
            border-radius: 50%;
            background-color: $color-border;
            border: 0.2rem solid transparent;
            margin-top: -0.15rem;
            border-image: linear-gradient($color-border, $color-border) 0 fill / 0.14rem 0.25rem 0.14rem 1 / 0 0 0 1000px;
            transition: 0.3s;
          }
        }


      }

      > div:nth-child(2) {
        display: flex;
        justify-content: space-between;
        font-size: 0.7rem;
      }
    }

    .controller-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 3rem;

      > div:nth-child(1) {
        width: 3rem;
      }


      svg {
        width: 3rem;
        height: 60%;
        cursor: pointer;
      }

      .controller {
        width: 60%;
        height: 100%;
        margin: 0;

        div {
          height: 100%;
          width: 100%;
        }

        .play-btn {
          width: 100%;
          height: 100%;
        }
      }

    }

  }
}

